<template>
  <div>
    <el-form
      class="filter-container"
      ref="searchData"
      :model="searchData"
      label-width="85px"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="成交序号">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.tradeID"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="品名">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.productName"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合约">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.instrumentID"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="方向">
            <el-select
              v-model="searchData.direction"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="买入" value="0"></el-option>
              <el-option label="卖出" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="开/平">
            <el-select
              v-model="searchData.offsetFlag"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="开仓" value="0"></el-option>
              <el-option label="平仓" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="成交价">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.price"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="投/保">
            <el-select
              v-model="searchData.hedgeFlag"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="投机" value="1"></el-option>
              <el-option label="套利" value="2"></el-option>
              <el-option label="套保" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="成交日期">
            <el-date-picker
              v-model="searchData.tradeDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width:100%;"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="子账号">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.logicAccountCode"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            @click="search"
            style="margin-top:5px"
          >
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      fit
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column
        prop="volume"
        label="成交手数"
        sortable
      ></el-table-column>
      <el-table-column
        prop="matchable_volume"
        label="可匹配手数"
        sortable
      ></el-table-column>
      <el-table-column
        prop="productName"
        label="品名"
        sortable
      ></el-table-column>
      <el-table-column
        prop="instrumentID"
        label="合约"
        sortable
      ></el-table-column>
      <el-table-column prop="direction" label="方向" sortable></el-table-column>
      <el-table-column
        prop="offsetFlag"
        label="开/平"
        sortable
      ></el-table-column>
      <el-table-column prop="price" label="成交价" sortable></el-table-column>
      <el-table-column
        prop="turnOver"
        label="成交额"
        sortable
      ></el-table-column>
      <el-table-column
        prop="tradeDate"
        label="成交日期"
        sortable
      ></el-table-column>
      <el-table-column
        prop="hedgeFlag"
        label="投/保"
        sortable
      ></el-table-column>
      <el-table-column
        prop="tradeID"
        label="成交序号"
        sortable
      ></el-table-column>
      <el-table-column
        prop="logicAccountCode"
        label="子账号"
        sortable
      ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="closeBtn('cancel')">取消</el-button> -->
      <el-button type="primary" @click="closeBtn()" size="mini">选择</el-button>
    </div>
  </div>
</template>
<script>
import { logicTraded } from "@/api/url_info.js";
export default {
  //子账户（指令）
  name: "sub-account",
  props: ["closeValue", "unable"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        operation: "SEL",
        tradeID: "",
        productName: "",
        instrumentID: "",
        direction: "99",
        offsetFlag: "99",
        price: "",
        hedgeFlag: "99",
        tradeDate: "",
        logicAccountCode: ""
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let that = this;
      //查询子账户成交明细(指令)
      if (that.searchData.tradeDate == null) {
        that.searchData.tradeDate = "";
      }
      if (that.searchData.direction == "") {
        that.searchData.direction = "99";
      }
      if (that.searchData.offsetFlag == "") {
        that.searchData.offsetFlag = "99";
      }
      if (that.searchData.hedgeFlag == "") {
        that.searchData.hedgeFlag = "99";
      }
      if (that.closeValue == "instruct") {
        that.searchData.type = "futures";
      } else if (that.closeValue == "optionsCommand") {
        that.searchData.type = "option";
      }
      console.log("1111", that.closeValue, that.searchData.type);
      await logicTraded(that.searchData)
        .then(res => {
          that.tableData = [];
          let data = res.result.results;
          that.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            that.tableData[i] = {
              tradeID: data[i]["tradeID"],
              productName: data[i]["productName"],
              instrumentID: data[i]["instrumentID"],
              direction: data[i]["direction"],
              offsetFlag: data[i]["offsetFlag"],
              price: data[i]["price"],
              volume: data[i]["volume"],
              turnOver: data[i]["turnOver"],
              tradeDate: data[i]["tradeDate"],
              hedgeFlag: data[i]["hedgeFlag"],
              logicAccountCode: data[i]["logicAccountCode"],
              matchable_volume: data[i]["matchable_volume"]
            };
          }
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    //禁选
    checkSelectable(row, rowIndex) {
      let arr = [];
      for (let i in this.unable) {
        arr.push(this.unable[i].tradeID);
      }
      if (
        arr.some(el => {
          return el === row.tradeID;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.getData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.getData();
    },
    //选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.getData();
    },
    closeBtn() {
      this.$emit("closeMatch", this.multipleSelection);
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-left: 90%;
}
.el-form-item {
  margin-bottom: 10px !important;
}
</style>
